<template>
	<view class="page">
		<template>
			<view class="flex item-center justify-between top" :class="status !== 1 ? 'close' : ''">
				<view class="flex item-center">
					<image v-if="status !== 1" class="size-20 mr-8" src="@/pagesJ/static/icon-mall-disabled.svg"></image>
					<image v-else class="size-20 mr-8" src="@/pagesJ/static/icon-mall.svg"></image>
					<view>积分商城{{ status === 1 ? '开启中' : '已关闭' }}</view>
				</view>
			</view>
			<view class="menu-list flex item-center justify-center">
				<template v-for="item in menu" :key="item.id">
					<view class="menu-item" :class="{'active':menuId == item.id}"
						@click="selMenu(item)">
						{{item.name}}
						<view class="sel-line" v-if="menuId == item.id"></view>
					</view>
				</template>
			</view>
			<General ref="general" v-if="menuId == 1" />
			<Point v-if="menuId == 2" />
		</template>
	</view>
</template>

<script setup>
	import {onShow,onShareAppMessage} from '@dcloudio/uni-app';
	import {ref,onMounted} from 'vue'
	import General from './components/general.vue'
	import Point from './components/point.vue'
	import {getHomePageApi} from '@/pagesJ/api/index.js'
	import {useUserStore} from '@/stores/modules/user.js'
	const userStore = useUserStore()
	const menu = ref([{
		name: '商城概况',
		id: 1
	}, {
		name: '积分明细',
		id: 2
	}])

	const menuId = ref(1)
	const status = ref('')
	const general = ref(null)
	const selMenu = (item) => {
		menuId.value = item.id
	}
	const getHomePage = (id) => {
		getHomePageApi({id}).then(res => {
			status.value = res.pointsMallState
		})
	}
	onShow(() => {
		general.value && general.value.getContent()
		general.value && general.value.getHomePage(userStore.userInfo.businessInfo.id)
		getHomePage(userStore.userInfo.businessInfo.id)
	})
	
	onShareAppMessage((res) => {
		return {
			title: `积分商城`,
			path: `/pagesF/merchantMall/index?id=${userStore.userInfo.businessInfo.id}`,
			mageUrl: res.target.dataset.filepath
		}
	})
</script>

<style lang="scss" scoped>
	.top{
		font-size: 14px;
		padding: 6px 16px;
		background: #FFF0EA;
		color: #FA4543;
		margin-bottom: 12px;
		&.close{
			background: #C6C6C6;
			color: white;
		}
	}
	.share-btn{
		font-size: 12px;
		padding: 4px 16px;
		border-radius: 4px;
		background: #FA4543;
		font-weight: 600;
		color: #ffffff;
	}
	.menu-list {
		padding: 10px 0 0 0;
		position: relative;
		z-index: 4;
		margin-bottom: 12px;
		.menu-item {
			width: 35%;
			text-align: center;
			position: relative;
			font-size: 30rpx;
			font-weight: 400;
			line-height: 22px;
			height: 30px;
			color: rgba(51, 51, 51, 0.6);

			&.active {
				color: rgba(51, 51, 51, 1);
			}

			.sel-line {
				position: absolute;
				width: 19px;
				height: 4px;
				background: rgba(250, 69, 67, 1);
				border-radius: 4px;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		}
	}
</style>